<template>
  <div class="data-reference-guide">
    <div class="guide-header">
      <h2>数据引用使用指南</h2>
      <p>学习如何在行为编排中使用数据引用功能</p>
    </div>

    <div class="guide-content">
      <!-- 基本概念 -->
      <div class="guide-section">
        <h3>📚 基本概念</h3>
        <div class="concept-cards">
          <div class="concept-card">
            <div class="card-icon">🔗</div>
            <h4>数据引用</h4>
            <p>通过引用路径获取资源的各种数据，如属性、状态、行为历史等</p>
          </div>
          <div class="concept-card">
            <div class="card-icon">📊</div>
            <h4>动态数据</h4>
            <p>在流程执行时实时获取最新的数据值，而不是静态配置</p>
          </div>
          <div class="concept-card">
            <div class="card-icon">🎯</div>
            <h4>上下文感知</h4>
            <p>根据当前资源的状态和行为历史做出智能决策</p>
          </div>
        </div>
      </div>

      <!-- 数据引用类型 -->
      <div class="guide-section">
        <h3>📋 数据引用类型</h3>
        <div class="reference-types">
          <div class="reference-type">
            <h4>🏷️ 资源属性 (resource.*)</h4>
            <div class="reference-items">
              <div class="reference-item">
                <code>resource.name</code>
                <span>资源名称</span>
              </div>
              <div class="reference-item">
                <code>resource.type</code>
                <span>资源类型</span>
              </div>
              <div class="reference-item">
                <code>resource.status</code>
                <span>资源状态</span>
              </div>
              <div class="reference-item">
                <code>resource.owner</code>
                <span>资源所有者</span>
              </div>
              <div class="reference-item">
                <code>resource.tags</code>
                <span>资源标签</span>
              </div>
              <div class="reference-item">
                <code>resource.metadata</code>
                <span>元数据</span>
              </div>
            </div>
          </div>

          <div class="reference-type">
            <h4>🔄 资源状态 (status.*)</h4>
            <div class="reference-items">
              <div class="reference-item">
                <code>status.lifecycle</code>
                <span>生命周期状态</span>
              </div>
              <div class="reference-item">
                <code>status.availability</code>
                <span>可用性状态</span>
              </div>
              <div class="reference-item">
                <code>status.version</code>
                <span>版本状态</span>
              </div>
              <div class="reference-item">
                <code>status.custom</code>
                <span>自定义状态</span>
              </div>
              <div class="reference-item">
                <code>status.lastChange</code>
                <span>最后状态变更时间</span>
              </div>
            </div>
          </div>

          <div class="reference-type">
            <h4>⚡ 行为数据 (behavior.*)</h4>
            <div class="reference-items">
              <div class="reference-item">
                <code>behavior.current</code>
                <span>当前行为</span>
              </div>
              <div class="reference-item">
                <code>behavior.history</code>
                <span>行为历史</span>
              </div>
              <div class="reference-item">
                <code>behavior.executionCount</code>
                <span>执行次数</span>
              </div>
              <div class="reference-item">
                <code>behavior.successRate</code>
                <span>成功率</span>
              </div>
            </div>
          </div>

          <div class="reference-type">
            <h4>📢 事件数据 (events.*)</h4>
            <div class="reference-items">
              <div class="reference-item">
                <code>events.recent</code>
                <span>最近事件</span>
              </div>
              <div class="reference-item">
                <code>events.count</code>
                <span>事件总数</span>
              </div>
              <div class="reference-item">
                <code>events.lastEvent</code>
                <span>最后事件</span>
              </div>
            </div>
          </div>

          <div class="reference-type">
            <h4>💻 系统数据 (system.*)</h4>
            <div class="reference-items">
              <div class="reference-item">
                <code>system.currentTime</code>
                <span>当前时间</span>
              </div>
              <div class="reference-item">
                <code>system.user</code>
                <span>当前用户</span>
              </div>
              <div class="reference-item">
                <code>system.tenant</code>
                <span>租户信息</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 使用示例 -->
      <div class="guide-section">
        <h3>💡 使用示例</h3>
        <div class="usage-examples">
          <div class="example-card">
            <h4>🎯 条件判断示例</h4>
            <div class="example-content">
              <p><strong>场景：</strong>根据资源状态决定是否执行备份操作</p>
              <div class="example-code">
                <div class="code-line">
                  <span class="code-label">左操作数：</span>
                  <code>&#123;&#123; resource.status &#125;&#125;</code>
                </div>
                <div class="code-line">
                  <span class="code-label">比较操作：</span>
                  <code>等于</code>
                </div>
                <div class="code-line">
                  <span class="code-label">右操作数：</span>
                  <code>"RUNNING"</code>
                </div>
              </div>
              <p class="example-desc">只有当资源状态为"运行中"时才执行备份</p>
            </div>
          </div>

          <div class="example-card">
            <h4>⚡ 行为执行示例</h4>
            <div class="example-content">
              <p><strong>场景：</strong>根据资源名称动态设置备份文件名</p>
              <div class="example-code">
                <div class="code-line">
                  <span class="code-label">目标资源：</span>
                  <code>&#123;&#123; resource.name &#125;&#125;</code>
                </div>
                <div class="code-line">
                  <span class="code-label">执行参数：</span>
                  <code
                  >backup_name: "&#123;&#123; resource.name
                    &#125;&#125;_backup_&#123;&#123; system.currentTime
                    &#125;&#125;"</code
                  >
                </div>
              </div>
              <p class="example-desc">
                自动生成包含资源名称和时间戳的备份文件名
              </p>
            </div>
          </div>

          <div class="example-card">
            <h4>📊 数据分析示例</h4>

            <div class="code-line">
              <span class="code-label">比较操作：</span>
              <code>大于</code>
            </div>
            <div class="code-line">
              <span class="code-label">右操作数：</span>
              <code>0.8</code>
            </div>
          </div>
          <p class="example-desc">只有当历史成功率大于80%时才执行操作</p>
        </div>
      </div>

      <div class="example-card">
        <h4>🔄 事件触发示例</h4>
        <div class="example-content">
          <p><strong>场景：</strong>根据资源所有者发送通知</p>
          <div class="example-code">
            <div class="code-line">
              <span class="code-label">事件名称：</span>
              <code>"resource_backup_completed"</code>
            </div>
            <div class="code-line">
              <span class="code-label">事件数据：</span>
              <code
              >{"owner": "&#123;&#123; resource.owner &#125;&#125;",
                "resource": "&#123;&#123; resource.name &#125;&#125;"}</code
              >
            </div>
          </div>
          <p class="example-desc">备份完成后向资源所有者发送通知</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 最佳实践 -->
  <div class="guide-section">
    <h3>🚀 最佳实践</h3>
    <div class="best-practices">
      <div class="practice-item">
        <div class="practice-icon">✅</div>
        <div class="practice-content">
          <h4>使用有意义的引用</h4>
          <p>选择最能表达业务逻辑的数据引用，避免使用过于复杂的嵌套路径</p>
        </div>
      </div>
      <div class="practice-item">
        <div class="practice-icon">🛡️</div>
        <div class="practice-content">
          <h4>添加默认值</h4>
          <p>为可能为空的数据引用提供默认值，确保流程的健壮性</p>
        </div>
      </div>
      <div class="practice-item">
        <div class="practice-icon">📝</div>
        <div class="practice-content">
          <h4>记录数据来源</h4>
          <p>在流程文档中记录使用的数据引用，便于后续维护和调试</p>
        </div>
      </div>
      <div class="practice-item">
        <div class="practice-icon">🧪</div>
        <div class="practice-content">
          <h4>充分测试</h4>
          <p>使用不同的数据场景测试流程，确保数据引用的正确性</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 操作步骤 -->
  <div class="guide-section">
    <h3>📖 操作步骤</h3>
    <div class="operation-steps">
      <div class="step-item">
        <div class="step-number">1</div>
        <div class="step-content">
          <h4>选择节点</h4>
          <p>在流程设计器中添加或选择一个节点</p>
        </div>
      </div>
      <div class="step-item">
        <div class="step-number">2</div>
        <div class="step-content">
          <h4>点击数据引用按钮</h4>
          <p>在需要配置的字段旁边点击📊按钮</p>
        </div>
      </div>
      <div class="step-item">
        <div class="step-number">3</div>
        <div class="step-content">
          <h4>选择数据类别</h4>
          <p>在弹出的对话框中选择合适的数据类别</p>
        </div>
      </div>
      <div class="step-item">
        <div class="step-number">4</div>
        <div class="step-content">
          <h4>选择具体字段</h4>
          <p>点击具体的数据字段，系统会自动填入引用表达式</p>
        </div>
      </div>
      <div class="step-item">
        <div class="step-number">5</div>
        <div class="step-content">
          <h4>验证和测试</h4>
          <p>保存配置并使用测试功能验证数据引用的正确性</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 数据引用指南组件
</script>

<style lang="less" scoped>
.data-reference-guide {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;

  .guide-header {
    text-align: center;
    margin-bottom: 32px;

    h2 {
      color: #1890ff;
      margin-bottom: 8px;
    }

    p {
      color: #666;
      font-size: 16px;
    }
  }

  .guide-section {
    margin-bottom: 40px;

    h3 {
      color: #333;
      margin-bottom: 20px;
      font-size: 20px;
      border-left: 4px solid #1890ff;
      padding-left: 12px;
    }
  }

  .concept-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;

    .concept-card {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }

      .card-icon {
        font-size: 32px;
        margin-bottom: 12px;
      }

      h4 {
        color: #333;
        margin-bottom: 8px;
      }

      p {
        color: #666;
        line-height: 1.6;
      }
    }
  }

  .reference-types {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .reference-type {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      padding: 20px;

      h4 {
        color: #1890ff;
        margin-bottom: 16px;
        font-size: 16px;
      }

      .reference-items {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 12px;

        .reference-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 8px 12px;
          background: #f8f9fa;
          border-radius: 4px;

          code {
            background: #e6f7ff;
            color: #1890ff;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: 500;
          }

          span {
            color: #666;
            font-size: 14px;
          }
        }
      }
    }
  }

  .usage-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;

    .example-card {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      padding: 20px;

      h4 {
        color: #1890ff;
        margin-bottom: 16px;
      }

      .example-content {
        p {
          color: #666;
          margin-bottom: 12px;
        }

        .example-code {
          background: #f8f9fa;
          border: 1px solid #e8e8e8;
          border-radius: 4px;
          padding: 12px;
          margin-bottom: 12px;

          .code-line {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;

            &:last-child {
              margin-bottom: 0;
            }

            .code-label {
              color: #666;
              font-size: 14px;
              min-width: 80px;
            }

            code {
              background: #e6f7ff;
              color: #1890ff;
              padding: 2px 6px;
              border-radius: 3px;
              font-size: 12px;
            }
          }
        }

        .example-desc {
          color: #52c41a;
          font-style: italic;
          margin: 0;
        }
      }
    }
  }

  .best-practices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;

    .practice-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      padding: 16px;

      .practice-icon {
        font-size: 24px;
        flex-shrink: 0;
      }

      .practice-content {
        h4 {
          color: #333;
          margin-bottom: 8px;
          font-size: 16px;
        }

        p {
          color: #666;
          line-height: 1.6;
          margin: 0;
        }
      }
    }
  }

  .operation-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .step-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      padding: 16px;

      .step-number {
        width: 32px;
        height: 32px;
        background: #1890ff;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        flex-shrink: 0;
      }

      .step-content {
        h4 {
          color: #333;
          margin-bottom: 8px;
          font-size: 16px;
        }

        p {
          color: #666;
          line-height: 1.6;
          margin: 0;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .data-reference-guide {
    padding: 16px;

    .concept-cards,
    .usage-examples {
      grid-template-columns: 1fr;
    }

    .reference-items {
      grid-template-columns: 1fr !important;
    }

    .best-practices {
      grid-template-columns: 1fr;
    }
  }
}
</style>
